
<template>
    <div class="users">
        <div class="user_handle">
             <h1 class="title">用户列表</h1>
        </div>
       <div class="user_content">
           <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
            prop="id"
            label="ID"
            width="300">
            </el-table-column>
            <el-table-column
            prop="username"
            label="用户名"
            width="360">
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱"
            width="480">
            </el-table-column>
            <el-table-column
            prop="phone"
            label="电话"
            width="400">
            </el-table-column>
            <el-table-column
            prop="createTime"
            :formatter = "formatTime"
            label="注册时间"
            width="300">
            <!-- <template slot-scope="scope">
                <span>{{ scope.row.createTime  }}</span>
            </template> -->
            </el-table-column>
        </el-table>
        
        <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>  -->
        
       <Pagination 
        :total="total" 
        :pagesize="pagesize" 
        :currentPage="currentPage" 
        @sendPageSzie="handleCurrentChange1"
        @sendPage="handleCurrentChange2"
        ></Pagination>
       </div>
    </div>
</template>
  
  <script>
  import { users } from "@/api/index";
  //时间转换
  import Time from "@/utils/Time"
  import  Pagination  from "@/common/Pagination";

  export default {
        name:"users",
        components:{
            Pagination
        },
        data(){
            return {
                // 表格初始化值
                tableData:[],
                total:0,
                pagesize:10,
                currentPage:1
            }
        },
        mounted(){
            this.getUsersData()
        },
        filters:{
            formateDate(time){
              console.log(time)
              return  new Date(time).toLocaleString()
               
            }   
        },
        methods:{
            async getUsersData(){
                //获取用户列表数据
               const res = await users();
               console.log(res)
               this.tableData = res.data.data.list;
               this.total =  res.data.data.total;

            },
            formatTime:function(row, column, cellValue, index){
               console.log(column, cellValue, index)
            //    return new Date(cellValue).toLocaleString();
                return  Time(cellValue)

            },
            // handleSizeChange(psize){
            //     console.log(psize)
            //     this.pageSize = psize;
            //     // pageNum  pageSize  接口文档
            //     users({pageSize: this.pageSize}).then(res=>{
            //         console.log(res)
            //         this.tableData = res.data.data.list;
            //     })

            // },
            // handleCurrentChange(cpage){
            //     console.log(cpage)
            //     this.currentPage = cpage
            //     // pageNum  pageSize  接口文档
            //     users({pageNum: this.currentPage}).then(res=>{
            //         console.log(res)
            //         this.tableData = res.data.data.list;
            //     })

            // },
            handleCurrentChange1(pagesize){
                console.log(pagesize)
                
                users({pageSize:pagesize}).then(res=>{
                    console.log(res)
                    this.tableData = res.data.data.list;
                })
            },
            handleCurrentChange2(cpage){
                console.log(cpage)
                users({pageNum: cpage}).then(res=>{
                    console.log(res)
                    this.tableData = res.data.data.list;
                })
            },
        }

    }
</script>

<style lang="scss" scoped>
.users{
    width: 95%;
    margin:  0 auto;
}
.user_handle{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.title{
    font-weight: normal;
    display: inline-block;
}


</style>